
import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, FlatList } from 'react-native';
import { Container, Content, Icon } from 'native-base';
import { Metrics, Colors } from '../../theme';

class courseList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            firstLoad: true,
            submitMiningId: "",
            miningTypeList: [
                {
                    name: '新手快速入门',
                    details: {
                        detailsArr: [
                            {
                                key: '0', title: `新手入门攻略`,
                                text: `1.通过好友分享的邀请码注册成为拾柴聚火用户，即可获得一台新手工具/试用自行车奖励，每日生产趣钻。

2.每日登录，并生产趣钻。   

3.每日玩拾柴聚火中的游戏、观看广告、分享商城信息等赚取财富值。

4.每日推荐新用户进入，增加幸福值、财富值。

5.鼓励自己的推荐用户登录APP，增加自己的幸福值

6.查看交易区的购买信息，出售产出的趣钻` },
                        ],
                        title: '新手入门攻略'
                    }
                },
                {
                    name: '新手进阶攻略',
                    details: {
                        detailsArr: [
                            {
                                key: '0', title: `新手进阶攻略`,
                                text: `1.注册成为拾柴聚火用户，并拥有新手工具/实习自行车，通过账户认证、实名认证。

2.推广下线用户，并激励下线用户账户认证、实名认证，提高生产趣钻数量比例、降低手续费到40%。

3.邀请4个好友后，自身的幸福值为1.2，提升每日产矿的比例。

4.通过试用自行车，则每个月得到11*1.2=13.2钻，出售钻石扣除40%手续费，可以得到10钻。
    或者购买电动车工具（每月产出120钻），需要购买100钻石，矿机最终产出120*1.2=144钻石。

5.或者通过更多的推广用户，得到更多的幸福值和更多的贡献度，成为家族达人分享手续费分红等奖励

6.分享直推用户的游戏充值分成、商城商品购买分成。

7.竞标城市合伙人，分享合伙人分红奖励。

8.完成趣院中的任务，得到各种免费奖励` },
                        ],
                        title: '新手进阶攻略'
                    }
                },
                {
                    name: '出售趣钻',
                    details: {
                        detailsArr: [
                            {
                                key: '0', title: `出售趣钻`,
                                text: `1）点击底部导航栏【交易】。
2）寻找合适的买单点击【卖给他】，确认交易信息输入交易密码，点击【确定】，出售成功，等待买家付款。

3）买家支付宝打款并且上传支付截图，点击已付款。

4）卖家确认收款后确认买家提供的支付截图是否正确，点击发送趣钻。
                          
温馨提示：

1）交易开放时间为：早8:00-晚23:00 ，超出规定时间无法出售趣钻/发布买单。

2）发布买单的趣钻数量上限为最近30天已完成订单数*5，交易成功订单为0单日上限为5。

3）无论买卖趣钻都只可同时进行1单，每天卖趣钻次数上限为3次。

4）每出售1枚趣钻需要扣除1财富值，财富值为0或不足将无法出售趣钻。

5）根据会员等级不同交易手续费不同，详见【用户VIP等级】。` },
                        ],
                        title: '出售趣钻'
                    }
                },
                {
                    name: '交易注意事项',
                    details: {
                        detailsArr: [
                            {
                                key: '0', title: `交易注意事项`,
                                text: `1）交易匹配之后，买家需在30分钟之内付款并上传打款凭证确认付款。如若超过30分钟未付款，交易自动取消，卖家冻结趣钻退回到可用账户；买家会受到财富值扣除惩罚，财富值数量为购买趣钻等额数量。
2）交易匹配之后，买家付款并上传打款截图，卖家未及时确认发送趣钻，系统会在30分钟后自动将交易趣钻划分到买家账户。 
3）交易匹配之后，如买家上传虚假交易凭证，卖家提交申诉，此时冻结交易订单，卖家申诉/联系客服，查实后，确认买家未按要求付款，则交易订单取消，趣钻退回到卖家账户。
4）为了规范交易市场，打击虚假交易，交易付款必须严格按照订单详情的总金额支付，并且只能使用支付宝支付，禁止使用微信或其他方式支付。付款之前认真核对对方收款信息，支付完成后上传支付截图时，备注该笔交易得支付交易号（必须上传该笔付款的账单详情，而并非付款页面）。
5）使用支付宝时，必须验证对方姓名。如遇姓名与支付宝不符，切勿支付，请及时联系客服处理。
6）卖家在未收到款或者买家上传虚假交易凭证的情况下均可申诉，判定结果会有消息通知，被判定恶意申诉会对卖家账号进行相应的处罚。` },
                        ],
                        title: '交易注意事项'
                    }
                },
                {
                    name: '交易申诉',
                    details: {
                        detailsArr: [
                            {
                                key: '0', title: `交易申诉`,
                                text: `★ 买家出现未付款或未付全款以及提交虚假截图等情况点了已付款后，卖家可以进行申诉，提交相关证据后提交申诉，申诉后订单将停止倒计时进入冻结状态，由官方进行判定。
★ 申诉通过：订单取消，趣钻退回卖家账户，针对买家的行为影响程度会进行封号等处理。
申诉驳回：订单继续倒计时，卖家可以再次补充证据进行申诉（同一订单只能申诉2次）。` },
                        ],
                        title: '交易申诉'
                    }
                },
            ]
        };
    }

    //  路由地址
    toNavigateFunc(uri) {
        this.props.navigation.navigate(uri)
    }

    /**
     * 渲染新手教程
     */
    renderMiningItem(item, index) {
        return (

            <TouchableOpacity style={{ flex: 1 }} onPress={() => this.props.navigation.navigate('CourseDetails', { params: item.details })}>
                <View style={Styles.cardStyle}>
                    <Text style={Styles.labelTxt}>{item.name}</Text>
                    <Icon type="FontAwesome" name="angle-right" style={{ color: Colors.hui66,fontSize:20 }}/>
                </View>
            </TouchableOpacity>
        )
    }

    // FlatList 循环 key
    _extraUniqueKey(item, index) {
        return "index" + index + item;
    }

    render() {
        let { miningTypeList } = this.state;
        return (
            <FlatList
                data={miningTypeList}
                keyExtractor={this._extraUniqueKey}
                renderItem={({ item, index }) => this.renderMiningItem(item, index)}
                contentContainerStyle={{ paddingBottom: Metrics.LIST_BOTTOM }}
            />
        )
    }
}

export default courseList;

const Styles = StyleSheet.create({
    miningItem: { margin: 10, marginBottom: 0, backgroundColor: '#ffffff', borderRadius: 5, padding: 15 },
    miningItemHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
    miningItemName: { fontSize: 18, color: '#ffffff' },
    miningItemActivity: { fontSize: 14, color: '#ffffff' },
    miningItembody: { marginTop: 8, flexDirection: 'row', justifyContent: 'space-between' },
    miningItemGemin: { fontSize: 14, color: '#ffffff' },
    miningItemGemout: { marginTop: 4, fontSize: 14, color: '#ffffff' },
    miningItemTime: { marginTop: 4, fontSize: 14, color: '#ffffff' },
    miningItemFooter: { alignSelf: 'flex-end', justifyContent: 'center', alignItems: 'center', borderWidth: 1, borderColor: '#ffffff', borderRadius: 10, padding: 10, paddingTop: 6, paddingBottom: 6 },
    miningItemExchange: { fontSize: 16, color: '#ffffff' },
    cardStyle: {
        height: 50,
        marginLeft: 15,
        paddingRight: 10,
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        borderBottomWidth: StyleSheet.hairlineWidth,
        borderColor: Colors.C7
    },
    labelTxt: { color: Colors.hui33, fontSize: 14 },
});